<template>
  <teleport to="body">
    <div class="message-shade" v-show="visible">
      <div class="custom-dialog" v-show="visible">
        <div class="title-box">
          <div class="title">{{ props.title }}</div>
          <div class="close" @click="closeFun">
            <img src="../../assets/imgs/close.png" />
          </div>
        </div>

        <div class="content-box">
          <div class="detail-box" v-if="type == 'detail'" v-html="innerHtml"></div>
          <el-table v-if="type != 'detail' && props.type == 'table' && props.list && props.list.length > 0"
            :data="props.list" style="width: 100%; color: #fff" height="355px" @cell-click="cellClick">
            <el-table-column type="index" align="center" label="序号" width="80">
            </el-table-column>
            <el-table-column show-overflow-tooltip v-for="(columnInfo, index) in props.labels" :key="index"
              :prop="columnInfo.prop" :label="columnInfo.label" :width="columnInfo.width" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </teleport>
</template>



<script setup lang='ts'>
import { ref } from "vue";
const props = defineProps(["title", "type", "labels", 'list']);
const emits = defineEmits(["closeDialog"]);

let visible = ref(true);
let innerHtml = ref('')
let type = ref('')
const closeFun = () => {
  emits("closeDialog");
  visible.value = false

}
const cellClick = (row: any) => {
  type.value = 'detail';
  innerHtml.value = row.content;
}
</script>



<style lang="less" scoped>
.message-shade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.3);
}

.custom-dialog {
  position: fixed;
  top: 50%;
  left: 30%;
  transform: translate(-30%, -50%);
  width: 40%;
  height: 500px;
  background: url(../../assets/imgs/dialogBg.png) no-repeat center;
  background-size: 100% 100%;
  z-index: 21;
  padding: 12px;
  color: #fff;
  box-sizing: border-box;

  // border: 1px solid aqua;
  .title-box {
    width: 100%;
    height: 55px;
    margin: 0 auto;
    padding: 0  0 0 10px;
    box-sizing: border-box;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 20px;
      font-family: "PingFangBold";
    }

    .close {
      cursor: pointer;

      img {
        display: block;
        width: 60%;
      }
    }
  }

  .content-box {
    margin-top: 10px;
    width: 100%;
    height: 355px;
    padding: 0 10px;
    overflow: hidden;
    box-sizing: border-box;
    // border: 1px solid palevioletred;

    .detail-box {
      width: 100%;
      height: 100%;
      overflow: auto;
    }

    /deep/.el-table--border th.el-table__cell,
    .el-table__fixed-right-patch {
      width: 5px;
    }

    /deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background: transparent;
    }

    /deep/.el-table {
      background: transparent;
      cursor: pointer;

      th {
        background: transparent;

        .cell {
          color: #fff;
        }
      }

      tr {
        background: transparent;
      }
    }
  }
}
</style>
